<template>
	<view class="person">
		<!-- 头部 -->
		<view class="header">
			<view class="top" style="display: flex;height: 88rpx;align-items: center;justify-content:center; #ffffff;font-size: 28rpx;">
				<view class="null"></view>
				<view class="live" style="padding-top: 50rpx;font-size: 34rpx;font-weight: bold;line-height: 48rpx;color: #fff;">我的</view>
				<view class="null"></view>
			</view>
			<!-- 头部上半部分 -->
			<view class="header_top">
				<!-- 头像 -->
				<view class="header_portrait">
					<image src="../../static/images/d7efa8aeaac82795f73c494557608af3@2x.png" />
				</view>
				<!-- 用户名和简介 -->
				<view class="header_main">
					<view>用户名</view>
					<view>简介：和我一起玩吧！</view>
				</view>
				<view class="header_set">
					<van-icon name="arrow" color="white" />
				</view>
			</view>
			<!-- 头部下半部分 -->
			<view class="header_bottom">
				<!-- 余额 -->
				<view class="header_bottom_view header_bottom_balance">
					<view>¥200</view>
					<view>我的余额</view>
				</view>
				<!-- 优惠卷 -->
				<view class="header_bottom_view header_bottom_coupon">
					<view>2</view>
					<view>优惠卷</view>
				</view>
				<!-- 我的收藏 -->
				<view class="header_bottom_view header_bottom_collect">
					<view>10</view>
					<view>我的收藏</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="person_main">
			<!-- 我的订单 -->
			<view class="order">
				<!-- 头部信息 -->
				<view class="order_header">
					<text class="order_header_name">我的订单</text>
					<view>
						<text>查看全部订单</text>
						<image src="../../static/images/cut@2x.png" />
					</view>
				</view>
				<!-- 线 -->
				<view class="order_wire"></view>
				<!-- 主体 -->
				<view class="order_main">
					<view class="order_main_box">
						<image src="../../static/images/daifukuan@2x.png" />
						<view>待付款</view>
					</view>
					<view class="order_main_box">
						<image src="../../static/images/daifahuo@2x.png" />
						<view>待发货</view>
					</view>
					<view class="order_main_box">
						<image src="../../static/images/daishouhuo@2x.png" />
						<view>待收货</view>
					</view>
					<view class="order_main_box">
						<image src="../../static/images/shouhoufuwu-zidongpingjia@2x.png" />
						<view>待评价</view>
					</view>
				</view>
			</view>
			<!-- 我的地址 -->
			<view class="main site" @click="mySite">
				<text>我的地址</text>
				<image src="../../static/images/cut@2x.png" />
			</view>
			<!-- 在线客服 -->
			<view class="main site" @click="onlineService">
				<text>在线客服</text>
				<image src="../../static/images/cut@2x.png" />
			</view>
			<!-- 意见反馈 -->
			<view class="main site" @click="feedback">
				<text>意见反馈</text>
				<image src="../../static/images/cut@2x.png" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			// this.getAuth();
			this.getSetting();
		},
		methods: {
			getSetting() {
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.userInfo']) {
							uni.navigateTo({
								url: '/pages/auth/index'
							});
						} else {
							console.log(555)
						}
					}
				})
			},
			getAuth() {
				console.log(444)
				wx.getUserInfo({
					success: (res) => {
						console.log(res)
					}
				})
			},
			mySite() {
				uni.navigateTo({
					url: '../mySite/mySite'
				});
			},
			onlineService() {
				uni.navigateTo({
					url: '../onlineService/onlineService'
				});
			},
			feedback() {
				uni.navigateTo({
					url: '../feedback/feedback'
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.person {
		height: 100%;

		/* 头部 */
		.header {
			background: linear-gradient(to right bottom, #28c84e, #0fd41d);

			/* 上半部分 */
			.header_top {
				display: flex;
				align-items: center;

				/* 头像 */
				.header_portrait {
					padding: 20rpx;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}

				/* 用户名和简介 */
				.header_main {
					flex: 1;
					color: #fff;

					view:first-child {
						font-size: 34rpx;
						font-weight: bold;
						line-height: 48rpx;
					}

					view:last-child {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
					}
				}

				/* 设置 */
				.header_set {
					padding-right: 40rpx;
				}
			}

			/* 下半部分 */
			.header_bottom {
				display: flex;
				justify-content: space-around;
				color: #fff;
				text-align: center;
				padding-bottom: 134rpx;

				.header_bottom_view {
					view:first-child {
						font-size: 34rpx;
						font-weight: 400;
						line-height: 48rpx;
					}

					view:last-child {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 34rpx;
					}
				}
			}
		}

		/* 主体 */
		.person_main {
			position: relative;
			top: -120rpx;

			/* 我的订单 */
			.order {
				border-radius: 10rpx;
				margin: auto;
				width: 90%;
				height: 240rpx;
				background: #fff;
				margin-bottom: 30rpx;

				/* 头部信息 */
				.order_header {
					display: flex;
					justify-content: space-between;
					padding: 20rpx;

					.order_header_name {
						font-size: 34rpx;
						font-weight: bold;
						line-height: 48rpx;
					}

					image {
						width: 14rpx;
						height: 26rpx;
						margin-left: 20rpx;
					}
				}

				/* 线 */
				.order_wire {
					height: 2rpx;
					margin: 0 20rpx;
					background: linear-gradient(90deg,
						rgba(204, 204, 204, 0) 0%,
						rgba(204, 204, 204, 0.3) 10%,
						rgba(204, 204, 204, 0.5) 51%,
						rgba(204, 204, 204, 0.3) 90%,
						rgba(204, 204, 204, 0) 100%);
				}

				/* 主体 */
				.order_main {
					display: flex;
					justify-content: space-around;
					margin: 0 20rpx;

					.order_main_box {
						border-right: 1px solid #ececec;
						text-align: center;
						padding: 0 20rpx;
						padding-top: 20rpx;
						height: 128rpx;
						color: #999;
						font-size: 28rpx;
						width: 25%;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.order_main_box:last-child {
						border: none;
					}
				}
			}

			/* 我的地址等 */
			.main {
				margin: auto;
				width: 90%;
				border-radius: 10rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;
				height: 88rpx;
				align-items: center;
				margin-bottom: 30rpx;

				text {
					font-size: 34rpx;
					font-weight: bold;
					line-height: 48rpx;
					padding-left: 20rpx;
				}

				image {
					width: 14rpx;
					height: 26rpx;
					padding-right: 20rpx;
				}
			}
		}
	}
</style>
